<template>
  <div class="main-box">
    <el-table
      :data="expenseList"
      border
      style="width: 100%">
      <el-table-column
        fixed prop="id" label="编号" align="center" width="60">
      </el-table-column>
      <el-table-column prop="activityName" label="活动名称" align="center"></el-table-column>
      <el-table-column prop="userName" label="社长姓名" align="center"></el-table-column>
      <el-table-column prop="activitySponser" label="所属社团" align="center"></el-table-column>
	  <el-table-column prop="activityAddress" label="活动地点" align="center"></el-table-column>
      <el-table-column prop="jk_amount" label="借款金额" align="center"></el-table-column>
      <el-table-column prop="bx_amount" label="报销金额" align="center"></el-table-column>
	  <el-table-column prop="sj_amount" label="实际金额" align="center"></el-table-column>
      <el-table-column label="报销时间" align="center" width="200">
        <template slot-scope="scope">{{scope.row.create_time | formatDate}}</template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope">
          <el-tag :type="typeTag[scope.row.status]" effect="dark">{{approvalTag[scope.row.status]}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="activityType" label="活动类型" align="center">
        <template slot-scope="scope">
          <el-tag :type="tagStyle[scope.row.activityType]" effect="dark">{{activityTag[scope.row.activityType]}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center" label="操作">
        <template slot-scope="scope">
          <el-tooltip :content="'审核结果: ' + approvalTag[scope.row.status]" placement="top">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#c3ccc7"
              :active-value="1"
              :inactive-value="2"
              @change="approvalActivityStatus(scope.row)">
            </el-switch>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <div class="pagination-box">
      <el-pagination
        :page-size="pageSize"
        :current-page="pageNum"
        :total="total"
        :page-sizes="[5, 10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
    import localStorageUtil from "../../../utils/localStorageUtil";
    import {formatDate} from '../../../utils/date'
    export default {
        methods: {
            approvalActivityStatus(row) {
                let {id,status} = row;
                let data = {
                    id: id,
                    status: status
                }
                this.$store.dispatch('expense/approval',data).then((res) => {
                    if (res.code === 200) {
                        this.$message({
                            message: '修改已提交',
                            type: 'success'
                        });
                    }
                })
            },
            fetchActivities() {
                let params = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize
                };
                this.$store.dispatch('expense/findAllByPagingAll', params).then((res) => {
                    this.expenseList = res.data
                })
            },
            /* 获取总记录条数*/
            fetchTotal() {
                this.$store.dispatch('expense/findTotal').then((res) => {
                    this.total = res.data
                })
            },
            /* 每页显示多少条改变时间*/
            handleSizeChange(val) {
                this.pageNum = 1;
                this.pageSize = val;
                this.fetchActivities()
            },
            /* 页码发生改变时间*/
            handleCurrentChange(val) {
                this.pageNum = val
                this.fetchActivities()
            },
        },
        created() {
            this.fetchActivities()
            this.fetchTotal()
        },
        filters: {
            /*时间过滤器*/
            formatDate(time) {
                let date = new Date(time);
                return formatDate(date, 'yyyy年MM月dd日 hh:mm:ss');
            }
        },
        data() {
            return {
                expenseList: [
                    {
                        id: '',
                        activityName: '',
						userName: '',
						activitySponser: '',
						activityAddress: '',
						jk_amount: '',
						bx_amount: '',
						sj_amount: '',
						create_time: '',
                        activityType: '',
                        status: ''
                    }
                ],
                genderList: ['男', '女'],
                approvalTag: ['审核中', '通过审核', '未通过审核', '活动已经结束'],
                activityTag: ['普通活动', '招新活动'],
                typeTag: ['', 'success', 'info'],
                pageNum: 1,
                pageSize: 6,
                total: 10,
                tagStyle: ['success','danger']
            }
        }
    }
</script>

<style>
  .main-box {
    margin: 2% 2%;
  }
  .pagination-box {
    margin: 4% 30%;
  }

</style>
